<template>
  <!--弹窗，添加规则-->
  <div v-if="dialogInfo.isShow" v-dialog-drag="dialogInfo.width" >
    <el-dialog 
      :modal="false"
      :title="dialogInfo.title"
      v-model="dialogInfo.isShow"
      :width="dialogInfo.width"
      :close-on-click-modal="true"
      :destroy-on-close="true"
    >
      <el-scrollbar style="height:550px;margin: 2px;padding: 10px;">
        <!--添加、修改列表的列-->
        <nf-form
          ref="formDom"
          v-form-drag="gridItemProps"
          :model="model"
          :partModel="_partMeta"
          v-bind="gridItemProps"
          size="small"
        >
        </nf-form>
        <el-button type="" @click="add" size="mini" >保存</el-button>
        <el-button type="" @click="esc" size="mini" >取消</el-button>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  import { reactive, ref, onMounted, defineComponent } from 'vue'
  import { ElDialog } from 'element-plus'
  import grid_item from './json/grid-item.json'

  export default defineComponent({
    name: 'nf-help-meta-grid-col-item',
    components: {
      ElDialog
    },
    props: {
      model: Object, // 验证规则的 model
      dialogInfo: Object, // 弹窗信息
      events: Object
    },
    setup (props) {

      const formDom = ref(null)
      let validate = () => {}
      onMounted(() => {
        // console.log('外部表单', formDom)
        // validate = formDom.value.formControl.validate
      })
      const gridItemProps = reactive(grid_item)
    
      const { events, dialogInfo } = props

      const _partMeta = reactive({})
      const _meta = reactive({})

      // 添加事件
      const add = () => {
        console.log(formDom)
        validate((valid) => {
          console.log('提交时的验证', valid)
        })
        if (typeof events.add === 'function') events.add()
        dialogInfo.isShow = false
      }

      // 取消或者关闭
      const esc = () => {
        if (dialogInfo ) dialogInfo.isShow = false
      }

      return {
        gridItemProps,
        formDom,
        _partMeta,
        add,
        esc
      }
    }
  })

</script>